<!-- 限时购 -->
<template>
  <div id="goods-limit-index" :style="{'background': pageOptions.background_color}">
    <div class="title">即将下架</div>
    <div class="rush-item" v-for="child in list" :key="child.id" @click.stop.prevent="gotoDetail(child)">
      <div class="flex-j-sb top-time flex-a-c ">
        <div class="flex-a-c ">
          <div style="color: #333;">{{ timestampToTime(child.start_time) }}{{pageOptions.diy_name||'限时购'}}</div>
          <i class="iconfont icon-ht_qd_miaosha" :style="{'color': pageOptions.background_color}"></i>
        </div>
        <div class="flex" style="color: #999;">
          <span style="display: block;">{{ checkTime(child.start_time) ? "距开始 " : "距结束 " }}</span>
          <van-count-down class="count-down" :time="child.start_time * 1000 - Date.parse(nowTimes)" v-if="checkTime(child.start_time)">
            <template #default="timeData">
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.days }}</span>
              <span class="colon">天</span>
              <span class="time" :style="{'background': pageOptions.background_color,'width': '15px'}">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <van-count-down class="count-down" :time="child.end_time * 1000 - Date.parse(nowTimes)" v-else>
            <template #default="timeData">
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.days }}</span>
              <span class="colon">天</span>
              <span class="time" :style="{'background': pageOptions.background_color,'width': '15px'}">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="time" :style="{'background': pageOptions.background_color}">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>

      <div class="flex rush-good" style="flex-wrap: wrap;">
        <img :src="child.img" alt="" />
        <div style="flex: 1; flex-direction: column;" class="flex-j-sb">
          <div class="line-clamp-2" style="font-size: 0.975rem; text-align: left;">{{ child.title }}</div>
          <div style="width: 65%;">
            <van-progress :color="pageOptions.progress_color" :percentage="child.stock_scale * 100" :show-pivot="false" stroke-width="6px" style="margin-top: 0.5rem;" />
          </div>
          <div class="flex-a-c flex-j-sb" style="margin-top: 0.75rem;">
            <div class="price" :style="{'color': pageOptions.now_price_color}">
              <small>{{ $i18n.t("money") }}</small
              >{{ child.vip_level_status && child.vip_level_status.status == 1 ? child.vip_level_status.word : child.pricenow }}
              <small style="text-decoration: line-through; color: #999;" v-if="child.priceold != 0 && child.priceold != child.pricenow">{{ $i18n.t("money") }}{{ child.priceold }}</small>
            </div>
            <div class="btn" :class="{'disabled-btn': Number(child.stock_scale) == 0}" :style="{'color': pageOptions.now_word_color,'background': pageOptions.now_background_color}">马上抢</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      nowTimes: new Date(),
      list: [],
      isLoadMore: true,
      current_page: 1,
      last_page: 1,

      pageOptions: {}
    };
  },

  created() {
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.goods-limit-set.frontend.controllers.index.index",{},".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.pageOptions = data.set;
      this.list = data.list.data;
      this.current_page = data.list.current_page;
      this.last_page = data.list.last_page;
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get("plugin.goods-limit-set.frontend.controllers.index.index", { page }, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(data.list.data);
      this.current_page = data.list.current_page;
    },
    //商品跳转
    gotoDetail(good) {
      let url = '';
      let params = {id: good.id};
      switch (good.plugin_id) {
      case 69:
        url = "grab_group";//抢团
        break;
      case 78:
        params.mode = 1;
        url = "newRetailSalesGood";//新零售
        break;
      default:
        url = "goods";
        break;
      }
      this.$router.push(this.fun.getUrl(url, params));
    },
    checkTime(start) {
      if(start) {
        if (new Date().getTime()/1000 < start) {
          return true;
        } else {
          return false;
        }
      }else {
        return false;
      }
    },
    //将时间戳转换成正常时间格式
    timestampToTime: function(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "";
      let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
      return M + '月'+ D + '日';
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#goods-limit-index {
  min-height: 100vh;
  padding: 1.25rem 0.875rem 3.125rem;

  .title {
    width: 12.5rem;
    height: 3.4375rem;
    line-height: 3.4375rem;
    background-size: 100%;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin: 0 auto 1.25rem;
    // background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img%2Ftitle_bg.png');
  }
}

.rush-item {
  margin-top: 0.75rem;

  .top-time {
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
  }

  .icon-ht_qd_miaosha {
    text-align: center;
    color: #333;
    line-height: 21px;
    margin-left: 4px;
  }

  .rush-good {
    background: #fff;
    border-radius: 0.5rem;
    margin: 0.5rem 0 0 0;
    padding: 0.625rem;

    img {
      // width: 6.625rem;
      max-width: 100%;
      height: 6.625rem;
      border-radius: 0.375rem;
      margin-right: 0.875rem;
    }

    .btn {
      padding: 0 0.75rem;
      line-height: 1.375rem;
      background: #000;
      color: #fff;
      border-radius: 0.75rem;
      font-size: 0.8125rem;
    }

    .disabled-btn {
      background-color: #999 !important;
      cursor: not-allowed;
      opacity: 0.5;
    }

    .price {
      font-size: 1rem;
    }

    small {
      font-size: 0.75rem;
    }
  }

  .count-down .time {
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
  }

  .count-down .colon {
    color: #999;
    padding: 0 2px;
  }
}
</style>
